<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
  <div class="p-6">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">需求参与人员</h2>
      <div class="flex space-x-3">
        <button
          type="button"
          {{on "click" this.showAddModal}}
          class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
          <T::Icon @icon="add" class="mr-2" />
          新增参与人员
        </button>
        <button
          type="button"
          {{on "click" this.openBatchModal}}
          class="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500"
        >
          <T::Icon @icon="add" class="mr-2" />
          批量增加
        </button>
      </div>
    </div>

    {{! 查询条件区域 }}
    <div class="mb-6 grid grid-cols-1 md:grid-cols-5 gap-4">
      {{! 需求筛选器 }}
      <T::InputSearch
        @key="按需求筛选"
        @placeholder="需求"
        @options={{this.requirementOptions}}
        @value={{this.selectedRequirementId}}
        @onChange={{this.filterByRequirement}}
        @selectMode={{true}}
        @clearText="全部需求"
        class="w-full"
      />
      
      {{! 人员筛选器 }}
      <T::InputSearch
        @key="按人员筛选"
        @placeholder="人员"
        @options={{this.memberOptions}}
        @value={{this.selectedMemberId}}
        @onChange={{this.filterByMember}}
        @selectMode={{true}}
        @clearText="全部人员"
        class="w-full"
      />
      
      {{! 开始时间筛选 }}
      <div class="pt-2">
        <label class="block">开始时间</label>
        <input
          type="date"
          value={{this.queryStartTime}}
          {{on "input" this.updateQueryStartTime}}
          class="block mt-2 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-gray-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300"
        />
      </div>
      
      {{! 结束时间筛选 }}
      <div class="pt-2">
        <label class="block">结束时间</label>
        <input
          type="date"
          value={{this.queryEndTime}}
          {{on "input" this.updateQueryEndTime}}
          class="block mt-2 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-gray-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300"
        />
      </div>
      
      {{! 类型筛选器 }}
      <T::InputSearch
        @key="按类型筛选"
        @placeholder="类型"
        @options={{this.typeOptions}}
        @value={{this.selectedType}}
        @onChange={{this.filterByType}}
        @selectMode={{true}}
        @clearText="全部类型"
        class="w-full"
      />
    </div>
    
    {{! 操作按钮区域 }}
    <div class="mb-6 flex justify-between items-center">
      {{#if this.isLoading}}
        <div class="flex items-center text-blue-600 dark:text-blue-400">
          <T::Icon @icon="loading" class="mr-2 animate-spin" />
          加载中...
        </div>
      {{else}}
        <div class="text-sm text-gray-500 dark:text-gray-400">
          共 {{this.filteredParticipants.length}} 条记录
        </div>
      {{/if}}
      
      <button
        type="button"
        {{on "click" this.clearFilters}}
        class="px-4 py-2 text-gray-600 bg-gray-200 rounded-lg hover:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600"
      >
        清除筛选
      </button>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-gray-50 dark:bg-gray-700">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">需求名称</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">类型</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">工作项</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">人员名称</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">开始时间</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">结束时间</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">工作量(单位h)</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">操作</th>
          </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
          {{#if this.isLoading}}
            <tr>
              <td colspan="8" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                <div class="flex items-center justify-center">
                  <T::Icon @icon="loading" class="mr-2 animate-spin" />
                  加载中...
                </div>
              </td>
            </tr>
          {{else if (eq this.filteredParticipants.length 0)}}
            <tr>
              <td colspan="8" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                暂无数据
              </td>
            </tr>
          {{else}}
            {{#each this.filteredParticipants as |participant|}}
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                {{participant.requirementName}}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                {{participant.type}}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                {{participant.workItem}}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                {{participant.memberName}}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                {{participant.startTime}}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                {{participant.endTime}}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                {{participant.workload}} h
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <button
                  type="button"
                  {{on "click" (fn this.editParticipant participant)}}
                  class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3"
                >
                  编辑
                </button>
                <button
                  type="button"
                  {{on "click" (fn this.deleteParticipant participant.id)}}
                  class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
                >
                  删除
                </button>
              </td>
            </tr>
            {{/each}}
          {{/if}}
        </tbody>
      </table>
    </div>

    {{#if this.showModal}}
      <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md">
          <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">
            {{if this.editingParticipant "编辑参与人员" "新增参与人员"}}
          </h3>
          
          <form {{on "submit" this.saveParticipant}}>
            <div class="space-y-4">
              <div class="pt-2">
                <T::InputSearch
                  @key="需求"
                  @placeholder="需求"
                  @options={{this.requirementOptionsForForm}}
                  @value={{this.formData.requirementId}}
                  @onChange={{fn this.updateFormData "requirementId"}}
                  @selectMode={{true}}
                />
              </div>
              
              <div class="pt-2">
                <T::InputSearch
                  @key="人员"
                  @placeholder="人员"
                  @options={{this.memberOptions}}
                  @value={{this.formData.memberId}}
                  @onChange={{fn this.updateFormData "memberId"}}
                  @selectMode={{true}}
                />
              </div>
              
              <div class="pt-2">
                <T::InputSearch
                  @key="类型"
                  @placeholder="类型"
                  @options={{this.typeOptions}}
                  @value={{this.formData.type}}
                  @onChange={{fn this.updateFormData "type"}}
                  @selectMode={{true}}
                />
              </div>
              
              {{! 日期范围控件 }}
              <div class="pt-2">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">日期范围</label>
                <div class="flex space-x-2">
                  <input
                    type="date"
                    value={{this.formData.startTime}}
                    {{on "input" (fn this.updateFormData "startTime")}}
                    class="flex-1 rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-gray-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300"
                    placeholder="开始时间"
                  />
                  <span class="flex items-center text-gray-500 dark:text-gray-400">至</span>
                  <input
                    type="date"
                    value={{this.formData.endTime}}
                    {{on "input" (fn this.updateFormData "endTime")}}
                    class="flex-1 rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-gray-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300"
                    placeholder="结束时间"
                  />
                </div>
              </div>
              
              <T::Input
                @key="工作量(单位h)"
                @type="number"
                @value={{this.formData.workload}}
                @min="0"
                @step="0.1"
                {{on "input" (fn this.updateFormData "workload")}}
              />
              
              <T::Input
                @key="工作项"
                @type="text"
                @value={{this.formData.workItem}}
                @placeholder="输入工作项描述..."
                {{on "input" (fn this.updateFormData "workItem")}}
              />
            </div>
            
            <div class="flex justify-end space-x-3 mt-6">
              <button
                type="button"
                {{on "click" this.hideModal}}
                class="px-4 py-2 text-gray-600 bg-gray-200 rounded-lg hover:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600"
              >
                取消
              </button>
              <button
                type="submit"
                class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
              >
                {{if this.editingParticipant "保存" "创建"}}
              </button>
            </div>
          </form>
        </div>
      </div>
    {{/if}}

    {{#if this.showBatchModal}}
      <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-2xl">
          <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">
            批量增加参与人员
          </h3>
          
          <form {{on "submit" this.saveBatchParticipants}}>
            <div class="space-y-4">
              <div class="pt-2">
                <T::InputSearch
                  @key="需求"
                  @placeholder="需求"
                  @options={{this.requirementOptionsForForm}}
                  @value={{this.batchFormData.requirementId}}
                  @onChange={{fn this.updateBatchFormData "requirementId"}}
                  @selectMode={{true}}
                  @required={{true}}
                />
              </div>
              
              <div class="pt-2">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  批量文本
                </label>
                <textarea
                  value={{this.batchFormData.batchStr}}
                  {{on "input" (fn this.updateBatchFormData "batchStr")}}
                  placeholder="张三	实现直播逻辑	功能开发	5.0	2024-01-01	2024-01-05"
                  rows="8"
                  class="block w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-gray-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300"
                ></textarea>
                <div class="mt-2 text-xs text-gray-500">
                  <p>每行一条记录，字段顺序：用户名\t工作项\t任务类型\t工作量\开始时间\t结束时间</p>
                  <p>示例：张三 实现直播逻辑	功能开发  5.0 2024-01-01  2024-01-05</p>
                </div>
              </div>
            </div>
            
            <div class="flex justify-end space-x-3 mt-6">
              <button
                type="button"
                {{on "click" this.hideBatchModal}}
                class="px-4 py-2 text-gray-600 bg-gray-200 rounded-lg hover:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600"
              >
                取消
              </button>
              <button
                type="submit"
                class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
              >
                批量创建
              </button>
            </div>
          </form>
        </div>
      </div>
    {{/if}}
  </div>
</div>